
import React, { Component } from 'react';

import {
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
} from 'react-native';
import ModalDropdowns from '../components/ModalDropdowns';
import Item_list from  '../components/Item_list'
// import Item from '../components/Item_demo'
import Item from '../components/Item_list';
import Swipers from '../components/Swipers';



import {styles}  from '../styles/style';

export default class List extends Component {
    static navigationOptions = {
        title: 'list',
    };


    constructor(props) {
        super(props);
        this.state = {
            inputText:'',
            data:'',
            refreshing:false,
            ready: false,
            numPerPage:10,
            pageNum:1

        }
        refreshing = false;
    }
    //刷新方法
    freshData = async(accesstoken) => {
        // const json = await this.fetchData(accesstoken);
        const bartonEquBasicInfos = data;
        this.setState({data: bartonEquBasicInfos});
    };

    clickBtn(){
        alert(this.state.inputText)
    }
    fetchData = (accesstoken) => {
        let pageNum=this.state.pageNum;
        let numPerPage=this.state.numPerPage;
        if (this.refreshing) {
            return;
        }
        this.setState({refreshing: true});
        this.refreshing = true;

       return fetch('http://121.40.178.164:4040/react-service/api/houseInfo/getHouseList.do', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:  'pageNum='+pageNum+'&numPerPage='+numPerPage
        })
            .then((response) => response.json()) //把response转为json
            .then((responseData) => { // 上面的转好的json
                // let res=JSON.stringify(responseData);
                const result=responseData.res.data.record;
                 console.log(responseData)
                if (responseData.code == 0) {
                    this.setState({refreshing: false});
                    this.refreshing = false;
                    // return result;
                }

                console.log(result)
                this.setState({
                    data:result,
                    refreshing:false
                })



                // this.props.navigation.goBack();
            })
            .catch((error)=> {
                alert('错误了'+error);
            })
    }
    componentDidMount(){
        // this.freshData();
        this.fetchData();
        this.setState({ready: true});
    }
    baidumap(){

        this.props.navigation.navigate('Findmap');

    }


    render() {
        const {data, refreshing, ready} = this.state;
        const {navigate,} = this.props.navigation;

        return (
            <ScrollView>
            <View style={styles.list_main}>
                <View style={styles.nowLocation}><Text style={styles.now}>上海</Text></View>
               <View style={styles.main}>
                   <View style={styles.flex}>
                       <TextInput
                           style={styles.input}
                           //returnKeyType="search"
                           placeholder="请输入内容"
                           underlineColorAndroid={'transparent'}
                           onChangeText={(searchInput) => this.setState({inputText: searchInput})}
                       />
                   </View>
                   <View>
                       <TouchableOpacity style={styles.btn} onPress={()=>this.clickBtn()}>
                       <Image
                           source={require('../images/search.png')}
                           style={styles.searchImg}/>
                   </TouchableOpacity>

                   </View>
                   <TouchableOpacity   onPress={()=>this.clickBtn()}>
                       <Text style={styles.checkedHouse} onPress={ ()=> this.baidumap()}>地图找房</Text>
                   </TouchableOpacity>

               </View>
                <View style={styles.selectContainer}>
                    <ModalDropdowns />
                </View>
                <View style={{flex:1}}>
                    <Swipers />
                </View>
                <View style={styles.list}>
                    {ready?

                    <FlatList
                        data={
                            this.state.data
                        }
                        onRefresh={this.fetchData.bind(this)}
                        refreshing={refreshing}
                        renderItem={
                            ({item}) => <Item title={item.villageName}
                                              image={item.photos}
                                              housePrice={item.salePrice}
                                              room={item.room}
                                              hall={item.hall}
                                              bathroom={item.bathroom}
                                              useArea={item.useArea}
                                              advantage={item.advantage}
                                              address={item.address}
                                              onPress={() => navigate('ListDetail', {
                                                id: item.id
                                              })}
                                              />
                        }
                        // refreshControl={
                        //     <RefreshControl
                        //         refreshing={true}
                        //     />
                        // }
                    />
                        : <ActivityIndicator size="large" style={styles.loading}/>}
                    {/*<Item_list />*/}
                    {/*<Item_list />*/}
                    {/*<Item_list />*/}





                    {/*<FlatList*/}
                        {/*data={[*/}
                            {/*{key: 'Devin'},*/}
                            {/*{key: 'Jackson'},*/}
                        {/*]}*/}
                        {/*renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}*/}
                    {/*/>*/}



                </View>


            </View>
            </ScrollView>
        );
    }
}
